<template>
  <div class="map detailedParent" >
    <div class="home" >
      <img v-if="!show" src="../../public/back.svg" alt="back" style="width: 100%;height: 100%" @click="back">
    </div>
    <div class="detailed"><img v-if="show" src="../../public/detailed.svg" alt="放大" @click="dialogVisible = true"></div>
    <div id="map-main">

    </div>
  </div>

  <el-dialog v-model="dialogVisible" title="图表详情" width="95vw" top="2vh">
    <div>
      <PopulationDensity></PopulationDensity>
    </div>
  </el-dialog>
</template>

<style scoped>
.map{
  position: relative;
  height: 100%;
  width: 100%;

}
#map-main{
  height: 100%;
  width: 100%;
}
.home{
  z-index: 10;
  width: 50px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
}



</style>

<script setup>
import {onMounted, ref} from "vue"
import chinaMap from "../../static/map/china.json"
import * as echarts from 'echarts';
import axios from "axios";
import emitter from "@/utils/emitter.js";
import {mapChanged} from "@/consts/eventName.js";
import {getPopulationOfAllProvince} from "@/api/population.js";
import DetailedHomeStruct from "@/components/DemographicCharacteristics/detailed/DetailedHomeStruct.vue";
import PopulationDensity from "@/components/mapData/MapData.vue";

let myChart;
let option;
let provinceName
let chartDom

let dialogVisible = ref(false)

let show = ref(true)

onMounted(()=>{
  console.log("加载map")

  getPopulationOfAllProvince().then((value)=>{
    let data = value.data
    let mapData = []

    data.forEach((item)=>{
      const jsonMap = new Map(Object.entries(item));
      mapData.push({
        name:jsonMap.keys().next().value,
        value:jsonMap.values().next().value
      })
    })
    return mapData
  }).then((value)=>{
    let max = 0
    let min = 10000000000

    chartDom = document.getElementById('map-main');
    myChart = echarts.init(chartDom);
    echarts.registerMap('CHINA',chinaMap)

    value.forEach((item)=>{
      if (item.value > max){
        max = item.value
      }
      if (item.value < min){
        min = item.value
      }
    })

    option = {
      title: {
        text: '人口数据分析',
        x:"center",
        y:"10",
        textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
          fontSize: 35,
        },
      },
      series: [
        {
          name: 'China',
          type: 'map',
          map: 'CHINA',
          roam: false,
          selectedMode: false,
          emphasis: {
            label: {
              show: true
            }
          },
          data:value
        }
      ],
      selectedMode: false,
      visualMap: {
        left: 'right',
        min: min,
        max: max,
        inRange: {
          color: [
            '#313695',
            '#4575b4',
            '#74add1',
            '#abd9e9',
            '#e0f3f8',
            '#ffffbf',
            '#fee090',
            '#fdae61',
            '#f46d43',
            '#d73027',
            '#a50026'
          ]
        },
        text: ['High', 'Low'],
        calculable: true
      },
    };
    myChart.setOption(option);
  }).then((value)=>{
    myChart.on("click", function (params) {
      show.value = false
      console.log("地图点击事件",params)

      // 一级地图才可触发下钻
      if (params.seriesName !== "China"){
        return
      }
      provinceName = params.name


      // 发送改变后的省份名称
      emitter.emit(mapChanged,provinceName)

      // 加载改变后的省份地图数据
      axios.get("../../../static/map/"+provinceName+".json") // 加载省份地图
          .then(res=>{
            console.log("加载"+provinceName+"数据")
            echarts.registerMap(provinceName,res.data)
            option = {
              title: {
                text: provinceName,
                left: 'right'
              },
              series: [
                {
                  name: provinceName,
                  selectedMode: false,
                  type: 'map',
                  roam: false,
                  map: provinceName,
                  emphasis: {
                    label: {
                      show: true
                    }
                  },
                }
              ]
            };
            myChart.setOption(option);
          })
    });
  })
})

function back(){
  console.log("地图返回")
  show.value = true
  provinceName = "china"

  // 发送改变后的省份名称
  emitter.emit(mapChanged,provinceName)

  option = {
    title: {
      text: '人口数据分析',
      x:"center",
    },
    selectedMode: false,
    series: [
      {
        name: 'China',
        selectedMode: false,
        type: 'map',
        roam: false,
        map: 'CHINA',
        emphasis: {
          label: {
            show: true
          }
        },
      }
    ]
  };
  myChart.setOption(option);
}

</script>